<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>鼠标移入事件</title>
	</head>
	<body>
		<div id="box">Hello JQuery</div>
		<script type="text/javascript" src="jquery-1.12.4.min.js" ></script>
		<script>
			//js
			/*var div=document.getElementById('box');
			div.onmouseover=function(){
				div.style.background='green';
			};
			div.onmouseleave=function(){
				div.style.background='white';
			}*/
			//jq
			/*$('#box').mouseover(
				function(){
					$('div').css('background','green');
				}
			);
			$('div').mouseout(
				function(){
					$('div').css('background','white');
				}
			)*/
			//同时绑定多个事件
			$('div').on({
				mouseover:function(){
					$('div').css('background','green');
				},
				mouseleave:function(){
					$('div').css('background','white');
				},
				click:function(){
					$('div').css('background','black');
				}
			})
		</script>
	</body>
</html>
